//张
// 歌单 专辑页面的顶部区域

<template>
  <div class="bigest_box">
    <div class="back_img_box">
      <img :src="cover_img_path" alt="" />
    </div>
    <div class="back_img_text">
      <div class="content_box">
        <div class="img_box">
          <img :src="cover_img_path" alt="" />
        </div>
        <div class="text_box">
          <h3 class="name_box">
            {{ playlist_album_name }}
            <div class="star_box" id="drop_shodow" @click="starThis()">
              <img src="../../assets/like.png" alt="" v-show="!isStar" />
              <img
                class="liked"
                src="../../assets/solidCore.png"
                alt=""
                v-show="isStar"
              />
            </div>
          </h3>
          <p class="author">
            {{ author_name }}
          </p>
          <p class="time">
            {{ issue_time }}
          </p>
          <p class="info">
            {{ brief_info }}
          </p>
          <div class="data_box">
            <div class="like_box">
              <span class="like_text">喜欢</span>
              <span class="like_data_box data">
                {{ like_data }}
              </span>
            </div>
            <div class="comment_box">
              <span class="comment_text">评论</span>
              <span class="comment_data_box data">
                {{ comment_data }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "top_block.vue",
  props: {
    cover_img_path: String,
    playlist_album_name: String,
    author_name: String,
    issue_time: String,
    brief_info: String,
    like_data: Number,
    comment_data: Number,
  },
  data() {
    return {
      isStar: false,
    };
  },
  methods: {
    //收藏歌单 专辑
    starThis() {
      let flag = this.$parent.flag;
      if (flag == 1) {
        if (sessionStorage.getItem("token")) {
          this.$http
            .post(
              "/star/album/",
              {
                id: Number(this.$parent.id),
              },
              {
                headers: {
                  Authorization:
                    "Bearer " + JSON.parse(sessionStorage.getItem("token")),
                },
              }
            )
            .then((res) => {
              alert(res.data.msg);
              if (res.data.code == 20000) {
                this.isStar = !this.isStar;
              }
            });
        } else alert("请先登录!");
      } else if (flag == 2) {
        if (sessionStorage.getItem("token")) {
          this.$http
            .post(
              "/star/playlist/",
              {
                id: Number(this.$parent.id),
              },
              {
                headers: {
                  Authorization:
                    "Bearer " + JSON.parse(sessionStorage.getItem("token")),
                },
              }
            )
            .then((res) => {
              alert(res.data.msg);
              if (res.data.code == 20000) {
                this.isStar = !this.isStar;
              }
            });
        } else {
          alert("请先登录!");
        }
      }
    },
  },
};
</script>

<style scoped>
.bigest_box {
  width: 100%;
  margin: 0 auto;
  height: 495px;
}
.back_img_box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 495px;
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.back_img_box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 495px;
  background: #000;
  opacity: 0.5;
}
.back_img_box img {
  width: 105%;
  height: auto;
  filter: blur(3px);
  margin: -10px;
}
.back_img_text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 495px;
  position: absolute;
}
.content_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1175px;
  height: 346px;
}
.img_box {
  width: 346px;
  height: 346px;
  border-radius: 20px;
}
.img_box img {
  width: 346px;
  height: 346px;
  border-radius: 20px;
}
.text_box {
  width: 752px;
}
.text_box .name_box {
  display: flex;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
}
.text_box p {
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
}
.text_box .author {
  margin: 10px 0 17px 0;
}
.text_box .time {
  margin-bottom: 12px;
}
#drop_shodow {
  width: 35px;
  height: 30px;
  overflow: hidden;
  position: relative;
}
#drop_shodow img {
  width: 28px;
  height: 24px;
  transform: translateY(-30px);
  filter: drop-shadow(#659274 6px 34px);
}
.data_box {
  display: flex;
  justify-content: flex-start;
  width: 329px;
  margin-top: 31px;
  margin-left: -20px;
}
.data_box > div {
  display: flex;
  justify-content: space-between;
  width: 101px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  margin: 0 20px;
}
.data_box div .data {
  font-size: 24px;
  font-family: Impact;
  font-weight: 400;
  color: #659274;
}
.star_box {
  transition: all 0.3s;
}

.star_box:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#drop_shodow .liked {
  width: 30px;
  height: 30px;
}
</style>